<template>
  <n-card class="mt-12">
    <n-grid :cols="10">
      <n-gi :span="9">
        <n-flex>
          <n-avatar lazy :src="userStore.avatar_url" :size="100" round />
          <n-flex vertical>
            <h2>{{ seekerStore.seeker?.name }}</h2>
            <n-flex>
              <InfoItem icon="i-fe:smile" :value="age"></InfoItem>
              <InfoItem icon="i-fe:user" :value="gender"></InfoItem>
              <InfoItem icon="i-fe:map-pin" :value="address"></InfoItem>
              <InfoItem icon="i-fe:navigation" :value="state"></InfoItem>
            </n-flex>
            <n-flex>
              <InfoItem icon="i-fe:star" :value="identity"></InfoItem>
              <InfoItem icon="i-fe:phone" :value="seekerStore.seeker?.phone_number"></InfoItem>
              <InfoItem icon="i-fe:mail" :value="seekerStore.seeker?.email"></InfoItem>
            </n-flex>
          </n-flex>
        </n-flex>
      </n-gi>
      <n-gi :span="1">
        <n-button text type="primary" @click="handle">编辑信息</n-button>
      </n-gi>
    </n-grid>
  </n-card>

  <MeModal ref="editInfoRef" title="编辑信息" width="600px" @ok="handleEditSave()">
    <n-form ref="infoFormRef" :model="infoForm" :rules="rules">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi label="姓名" path="name" :span="12">
          <n-input v-model:value="infoForm.name" maxlength="10" />
        </n-form-item-gi>
        <n-form-item-gi label="手机号码" path="phone_number" :span="12">
          <n-input v-model:value="infoForm.phone_number" maxlength="20" />
        </n-form-item-gi>
        <n-form-item-gi label="邮箱" path="email" :span="12">
          <n-input v-model:value="infoForm.email" maxlength="30" />
        </n-form-item-gi>
        <n-form-item-gi label="我的身份" path="identity" :span="12">
          <n-select v-model:value="infoForm.identity" :options="identityOps" />
        </n-form-item-gi>
        <n-form-item-gi label="当前状态" path="state" :span="12">
          <n-select v-model:value="infoForm.state" :options="stateOps" />
        </n-form-item-gi>
        <n-form-item-gi label="现居地" path="address_code" :span="12">
          <n-cascader
            v-model:value="infoForm.address_code"
            expand-trigger="hover"
            :options="cities"
            :show-path="true"
            check-strategy="child"
          />
        </n-form-item-gi>

        <n-form-item-gi label="性别" path="gender" :span="12">
          <n-radio-group v-model:value="infoForm.gender">
            <n-radio-button
              v-for="gender in genders"
              :key="gender.value"
              :value="gender.value"
              :label="gender.label"
            />
          </n-radio-group>
        </n-form-item-gi>

        <n-form-item-gi label="出生年月" path="birth_date" :span="12">
          <n-date-picker
            v-model:formatted-value="infoForm.birth_date"
            type="month"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="y年 M月"
            year-format="y年"
            month-format="M月"
          />
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </MeModal>
</template>

<script setup>
import seekerApi from '@/api/seeker'
import { MeModal, InfoItem } from '@/components'
import { useForm, useModal } from '@/composables'
import { useUserStore, useSeekerStore } from '@/store'
import { cities, getCity } from '@/data'
const userStore = useUserStore()
const seekerStore = useSeekerStore()

const rules = {
  name: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  phone_number: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  email: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  identity: { type: 'number', required: true, message: '此为必填项', trigger: ['blur'] },
  state: { type: 'number', required: true, message: '此为必填项', trigger: ['blur'] },
  address_code: { required: true, message: '此为必填项', trigger: ['blur'] },
  gender: { type: 'number', required: true, message: '此为必填项', trigger: ['blur'] },
  birth_date: { required: true, message: '此为必填项', trigger: ['blur'] },
}

const genders = [
  { value: 0, label: '女' },
  { value: 1, label: '男' },
]

const identityOps = [
  { value: 0, label: '学生' },
  { value: 1, label: '职场人' },
]

const stateOps = [
  { value: 0, label: '离校，正在找工作' },
  { value: 1, label: '在校，可即刻到岗' },
  { value: 2, label: '在校，看看机会' },
  { value: 3, label: '在校，暂时不找工作' },
]

//年龄 计算
let age = computed(() => {
  if (!seekerStore.seeker || !seekerStore.seeker.birth_date) return '未知年龄'
  const now = new Date()
  const birth = new Date(seekerStore.seeker.birth_date)
  let ret = now.getFullYear() - birth.getFullYear()

  // 检查是否已经过了生日
  if (
    now.getMonth() < birth.getMonth() ||
    (now.getMonth() === birth.getMonth() && now.getDate() < birth.getDate())
  ) {
    ret--
  }
  return ret
})

//性别 计算
let gender = computed(() => {
  if (!seekerStore.seeker || seekerStore.seeker.gender===null) return '未知性别'
  if (seekerStore.seeker.gender === 1) return '男'
  else return '女'
})

//计算地址
let address = computed(() => {
  if (!seekerStore.seeker || !seekerStore.seeker.address_code) return '未知地址'
  return getCity(seekerStore.seeker.address_code)
})

//计算状态
let state = computed(() => {
  if (!seekerStore.seeker || seekerStore.seeker.state === null) return '未知状态'
  const state = seekerStore.seeker.state
  if (state === 0) return '离校，正在找工作'
  if (state === 1) return '在校，可即刻到岗'
  if (state === 2) return '在校，看看机会'
  else return '在校，暂时不找工作'
})

//计算身份
let identity = computed(() => {
  if (!seekerStore.seeker || seekerStore.seeker.identity === null) return '未知身份'
  const identity = seekerStore.seeker.identity
  if (identity === 0) return '学生'
  if (identity === 1) return '职场人'
})

function handle() {
  editInfoRef.value.open()
}

const [editInfoRef] = useModal()
const [infoFormRef, infoForm, infoValidation] = useForm({})

async function handleEditSave() {
  await infoValidation()
  await seekerApi.updateSeeker(infoForm.value)
  $message.success('资料修改成功')
  seekerStore.updateSeeker(infoForm.value)
}

onMounted(async () => {
  // await seekerStore.getSeeker()
  //获取服务器数据后更新内容
  infoForm.value = { ...seekerStore.seeker }
})
</script>
